<template>
  <p-drawer
    placement="right"
    :closable="false"
    width="calc(100vw - 200px)"
    :visible="visible"
    :mask-closable="false"
    :destroy-on-close="true"
    @close="onClose"
  >
    <TaskTitle title-name="新增线索" />
    <div class="list-container">
      <TitleSecondary title="基本信息" />
      <FormClueInfo
        ref="form"
        :form="form"
        :show-form="false"
        @number-click="numberInfo"
      />
      <BottomLine />
    </div>
    <ButtonGroup
      class="footer"
      :options="footerButtons"
      @click="handleButtonClick"
    />
  </p-drawer>
</template>

<script>
import FormClueInfo from '@/components/task/FormClueInfo.vue';
import DrawerMixin from './mixin';
import { postClueSave, postClueCreate, postClueSubmit } from '@/api/clue.js';

export default {
  components: {
    FormClueInfo,
  },
  mixins: [DrawerMixin],
  data() {
    return {
      form: {
        leadsName: '',
        leadsSource: '',
        custItemName: '',
        custItemNo: '',
        custItemStep: '',
        itemDemandNum: '',
        expectPrice: '',
        expectCost: '',
        expectAmount: '',
        salesOrgCode: '',
        salesGroupCode: '',
        // pmGroupCode: '',
        customerName: '',
        assessLevel: '',
        customerCode: '',
        appCategory: '',
        salesAreaName: '',
        salesName: '无',
        pmName: '无',
        remark: '',
        customerShortName: '',
        deptMgrUserId: '',
        salesGroup: {
          key: '',
          label: '',
        },
        pmGroup: {
          key: '',
          label: '',
        },
        salesOrg: {
          key: '',
          label: '',
        },
      },
    };
  },

  computed: {
    footerButtons() {
      return [
        {
          key: 'submit',
          type: 'primary',
          label: '提交',
        },
        {
          key: 'save',
          label: '保存',
        },
        {
          key: 'close',
          label: '返回',
        },
      ];
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (!val) return;
        const clue = this.detail || {};
        this.form = {
          leadsName: clue.leadsName || '',
          leadsSource: clue.leadsSource || '',
          custItemName: clue.custItemName || '',
          custItemNo: clue.custItemNo || '',
          custItemStep: clue.custItemStep || '',
          itemDemandNum: clue.itemDemandNum || '',
          expectPrice: clue.expectPrice || '',
          expectCost: clue.expectCost || '',
          expectAmount: clue.expectAmount || '',
          salesOrgCode: clue.salesOrgCode || '',
          customerCode: clue.customerCode || '',
          // pmGroupCode: clue.pmGroupCode || '',
          // salesGroupCode: clue.salesGroupCode || '',
          customerName: clue.customerName || '',
          assessLevel: clue.assessLevel || '',
          appCategory: clue.appCategory || '',
          salesName: clue.salesName || '无',
          pmName: clue.pmName || '无',
          remark: clue.remark || '',
          customerShortName: clue.customerShortName || '',
          salesAreaName: clue.salesAreaName || '',
          updateDeptName: clue.updateDeptName || '',
          deptMgrUserName: clue.deptMgrUserName || '',
          deptMgrUserId: clue.deptMgrUserId || '',
          salesGroup: {
            key: clue.salesGroupCode || '',
            label: clue.salesGroupName || '',
          },
          pmGroup: {
            key: clue.pmGroupCode || '',
            label: clue.pmGroupName || '',
          },
          salesOrg: {
            key: clue.salesOrgCode || '',
            label: clue.salesOrgName || '',
          },
        };
      },
      immediate: true,
    },
  },
  methods: {
    onClose() {
      this.$emit('update:visible', false);
      this.$emit('fresh');
    },
    // 获取流程id
    async submitData() {
      const valid = await this.$refs.form.validate();
      if (!valid) return new Promise(() => {});
    },
    // 提交
    async submitCallback() {
      await this.submitData();
      const res = await postClueCreate({
        bizModule: 'leads',
        currStatus: '2',
        bizType: '1',
      });
      const processId = res.data.data;
      await postClueSubmit({
        ...this.form,
        processId,
        pmGroupName: this.form.pmGroup?.label,
        pmGroupCode: this.form.pmGroup?.key,
        salesGroupCode: this.form.salesGroup?.key,
        salesGroupName: this.form.salesGroup?.label,
      });
      this.$message.success('提交成功！');
      this.closeCallback();
    },
    // 保存
    async saveCallback() {
      await this.submitData();
      const res = await postClueCreate({
        bizModule: 'leads',
        currStatus: '1',
        bizType: '1',
      });
      const processId = res.data.data;
      await postClueSave({
        ...this.form,
        processId,
        pmGroupName: this.form.pmGroup?.label,
        pmGroupCode: this.form.pmGroup?.key,
        salesGroupCode: this.form.salesGroup?.key,
        salesGroupName: this.form.salesGroup?.label,
      });
      this.$message.success('保存成功！');
      this.closeCallback();
    },
    // 返回
    closeCallback() {
      this.onClose();
    },
    handleButtonClick(key) {
      const fn = `${key}Callback`;
      this[fn] && this[fn]();
    },
    numberInfo(val) {
      this.$emit('number-click', val);
    },
  },
};
</script>

<style lang="less" scoped>
.footer {
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-top: 1px solid #e5e6e9;
}
.list-container {
  height: calc(100% - 110px);
  display: flex;
  flex-direction: column;
  overflow-y: scroll;
  position: relative;
  box-sizing: border-box;
  padding: 10px 24px;
}

/deep/ .poros-drawer-body {
  min-width: 1136px;
  height: 100%;
  padding: 0;
}
.progress-container {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
</style>
